import { FlatList, FlatListProps, View, Text } from "react-native"
import { TracksListItem } from "./TracksListItem"
import { utilsStyles } from "@/styles"
import TrackPlayer, { Track } from 'react-native-track-player';
import FastImage from "react-native-fast-image";
import { unknownTrackImageUri } from "@/constants/images";

export type TracksListProps = Partial<FlatListProps<Track>> & {
    tracks: Track[]
}

const ItemDivider = ({ }) => {
    return (
        <View style={{ ...utilsStyles.itemSeparator, marginVertical: 9, marginLeft: 60 }} />
    )
}

const ListEmptyComponent = () => {
    return (
        <View >
            <Text style={utilsStyles.emptyComponentText}>😅抱歉，没有找到歌曲😅</Text>
            <FastImage style={utilsStyles.emptyContentImage}
             source={{
                uri: unknownTrackImageUri,
                priority: FastImage.priority.normal,
            }}></FastImage>
        </View>
    )
}

export const TracksList = ({ tracks, ...flatlistProps }: TracksListProps) => {
    const hanleTrackSelect = async (track: Track) => {
        TrackPlayer.load(track)
        TrackPlayer.play()
    }
    return (
        <FlatList data={tracks}
        contentContainerStyle={{ paddingTop: 10, paddingBottom: 128 }}
         
            ListFooterComponent={tracks.length > 0 ?  ItemDivider : null}
            ItemSeparatorComponent={ItemDivider}
            ListEmptyComponent={<ListEmptyComponent />}
            renderItem={({ item: track }) =>  <TracksListItem track={{ ...track, image: track.artwork }} onTrackSelect={hanleTrackSelect} />
            
            }
            {...flatlistProps}

        />
    )
} 